<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<body>
<div class="container-fluid">
    <div class="row-fluid" th:fragment="head">
        <div class="span12">
            <ul class="nav nav-pills">
                <li class="active">
                    <a th:href="@{/inedx}">首页</a>
                </li>
            <!--如果未登录，则显示登录按钮-->
                <li shiro:notAuthenticated="">
                    <a th:href="@{/tologin}">登录</a>
                </li>
            <!--如果已登录，显示用户名 + 注销-->
                <li shiro:authenticated="">
                    <span>用户名：<span shiro:principal=""></span></span>

                    <span><a th:href="@{/logout}">注销</a></span>
                </li>
            </ul>
            <h3 class="text-center">
                Shiro 学习
            </h3>
            <h4 th:text="${msg}" class="text-center" style="color: red"></h4>
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-xs-4" shiro:hasAnyRoles="root" >
            <h3>level 1</h3>

            <p><a th:href="@{/l1/1}">level 1-1</a></p>
            <p><a th:href="@{/l1/2}">level 1-2</a></p>
            <p><a th:href="@{/l1/3}">level 1-3</a></p>
        </div>

        <div class="col-xs-4" >
            <h3>level 2</h3>

            <p shiro:hasPermission="user:/2/1:*"><a th:href="@{/l2/1}">level 2-1</a></p>
            <p shiro:hasPermission="user:/2/2:*"><a th:href="@{/l2/2}">level 2-2</a></p>
            <p shiro:hasPermission="user:/2/3:*"><a th:href="@{/l2/3}">level 2-3</a></p>
        </div>

        <div class="col-xs-4" shiro:hasPermission="user:/3/*:*">
            <h3>level 3</h3>

            <p><a th:href="@{/l3/1}">level 3-1</a></p>
            <p><a th:href="@{/l3/2}">level 3-2</a></p>
            <p><a th:href="@{/l3/3}">level 3-3</a></p>
        </div>
    </div>
</div>
</body>
</html>